<template>
    <div id="codeButton">
        <button @click="send" :class="{'disabled':sendMsgDisabled==true}" :disabled="sendMsgDisabled==true">
            <span v-if="sendMsgDisabled">{{time+'秒后获取'}}</span>
            <span v-if="!sendMsgDisabled">获取验证码</span>
        </button>
    </div>
</template>

<script>
export default {
    props: {
        codeType: {
            type: String,
            default: ""
        },
        phone: {
            type: String
        }
    },
    data() {
        return {
            time: 60, // 发送验证码倒计时
            sendMsgDisabled: false
        };
    },
    methods: {
        //获取验证码
        send() {
            console.log(this.phone);
            if (!this.phone) {
                return;
            }
            let test = /^1[3|4|5|6|7|8|9][0-9]{9}$/;
            if (!test.test(this.phone)) {
                this.$basic.hToast("请输入正确的手机号！");
                return;
            }
            //校验手机号
            let me = this;
            me.sendMsgDisabled = true;
            let interval = window.setInterval(function() {
                if (me.time-- <= 0) {
                    me.time = 60;
                    me.sendMsgDisabled = false;
                    window.clearInterval(interval);
                }
            }, 1000);
            //
            var data = {
                phone: me.phone,
                type: me.businessCode
            };
            this.$.Post("/api/user/sendSms.htm", data, function(re) {
                this.$basic.hToast("验证码发送成功");
            });
        }
    }
};
</script>

<style lang="scss" rel="stylesheet/scss">
#codeButton {
    overflow: hidden;
    button {
        border: 0;
        border-radius: 5px;
        height: 0.8rem;
        line-height: 0.8rem;
        text-align: center;
        padding: 0 rem(8);
        color:inherit;
        width: inherit;
        background-color: inherit;
        span {
            font-size:rem(24);
        }
    }
    .disabled {
        color: #353535;
    }
}
</style>
